<template>
  <div class="app">
    <!-- 无人log -->
    <div class="log"></div>
    <dv-decoration-5 class="decoration-l" :dur="3"/>
    <!-- 标题 -->
    <div class="headline">无人宝可视化数据中心</div>
    <!-- 地址 -->
    <div class="location">
      <samp>苏州</samp>
      <img src="./assets/筛选.png" />
    </div>
    <!-- 时间 -->
    <div class="time">
      <Time></Time>
    </div>
    <Subject></Subject>
  </div>
</template>

<script>
import Time from '@/components/Time.vue'
import Subject from '@/views/Subject.vue'
export default {
  data () {
    return {
      clientWidth: document.body.clientWidth
    }
  },
  mounted () {
    const body = document.querySelector('.app')
    const scale1 = document.body.clientWidth / 1920
    body.style.transform = `scale(${scale1}) `
    window.onresize = () => {
      return (() => {
        window.clientWidth = document.body.clientWidth
        this.clientWidth = window.clientWidth
      })()
    }
  },
  components: {
    Time,
    Subject
  },
  watch: {
    clientWidth  (newVal) {
      const app = document.querySelector('.app')
      const scale1 = newVal / 1920
      app.style.transform = `scale(${scale1}) `
    }
  }

}

</script>

<style lang="less" scoped>
.app {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: url("./assets/背景.png") no-repeat center;
  background-color: #01131AFF;
  transform-origin: left top;
}
.decoration-l{
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50px;
  width: 900px;
  height: 98px;
  z-index: -1;
}
.log {
  position: absolute;
  top: 31px;
  left: 0;
  width: 286px;
  height: 63px;
  background: url("./assets/图层\ 16.png") no-repeat center;
}
.headline {
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 371px;
  // height: 34px;
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #2487bf;
  // line-height: 18px;

  background: linear-gradient(176deg, #0394af 0%, #8be9eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.location {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 111px;
  left: 26px;
  width: 127px;
  height: 56px;
  background: url("./assets/矩形\ 19\ 拷贝\ 5.png") no-repeat center;
  z-index: 200;
  samp {
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
  img{
    margin-left: 11px;
    margin-top: 5px;
    width: 27px;
    height: 23px;
    opacity: 0.8;
  }
}
.time{
  position: absolute;
  top: 112px;
  right: 0;
  height: 56px;
  width: 648px;
}
</style>
